<template>
  <div
    v-if="isShow"
    class="container"
  >
    <div class="alert-container">
      <div class="erro-message">
        {{ $t(message) }}
      </div>

      <button
        class="close"
        @click="close"
      >
        {{ $t('close') }}
      </button>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState({
      isShow: (state) => state.alert.isShow,
      message: (state) => state.alert.message,
      func: (state) => state.alert.func,
    }),
  },
  methods: {
    ...mapActions([
      'hideAlert',
    ]),
    close() {
      console.log(11);
      this.func();
      console.log(22);
      this.hideAlert();
    },
  },
};
</script>

<style lang="scss" scoped>
  .container {
    position : fixed;
    top : 0;
    left : 0;
    z-index : 1000;
    display : flex;
    align-items : center;
    justify-content : center;
    width : 100vw;
    height : 100vh;
    background-color : rgba($color: #000000, $alpha: 0.3);

  }

  .alert-container {
    display : flex;
    flex-direction : column;
    align-items : center;
    width : 500px;
    padding : 30px 30px;
    background-color : white;
  .erro-message{
    width : 100%;
    text-align : center;
  }

    .close{
      width : 70px;
      height : 30px;
      margin-top : 30px;
      color : #ffffff;
      background-color : black;
      border :  none;
      border-radius : 35px;
    }
  }
</style>
